<template>
  <div>
    <sy-tabs :selected.sync="selectedTab">
      <sy-tabs-head>
        <sy-tabs-item name="1">Tab 1</sy-tabs-item>
        <sy-tabs-item name="2">Tab 2</sy-tabs-item>
        <sy-tabs-item name="3">Tab 3</sy-tabs-item>
        <template v-slot:actions>
          <button>按钮</button>
        </template>
      </sy-tabs-head>
      <sy-tabs-body>
        <sy-tabs-pane name="1">Content of Tab Pane 1</sy-tabs-pane>
        <sy-tabs-pane name="2">Content of Tab Pane 2</sy-tabs-pane>
        <sy-tabs-pane name="3">Content of Tab Pane 3</sy-tabs-pane>
      </sy-tabs-body>
    </sy-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: '1'
    }
  }
}
</script>
